<script>
import { Message } from 'element-ui'
import { mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {
      ruleForm: {
        username: process.env.NODE_ENV === 'development'? '13800000002' : '',
        password: process.env.NODE_ENV === 'development'? 'hm#qd@23!' : '',
        isArray: process.env.NODE_ENV === 'development'
      },
      rules: {
        username: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          // { min: 3, max: 6, message: '长度为3-6位数的小写字母', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确格式的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度必须是6-16位之间', trigger: 'blur' }
        ],
        isArray: [
          { validator: (rules, value, callback) => {
            if (value) {
              callback()
            } else {
              callback(new Error('请勾选用户同意协议'))
            }
           }
          }
        ]
      }
    }
  },
  computed: {
    ...mapState('user', ['title', 'count'])
  },
  methods: {
    ...mapMutations('user', ['changeInfo']),
    changenAdd() {
      this.changeInfo()
    },
    async login() {
      await this.$refs.formModel.validate()
      await this.$store.dispatch('user/login', this.ruleForm)
      this.$router.push('/')
      location.reload()
      Message({ type: 'success', message: '登录成功！' })
    },
  }
}
</script>
<template>
  <div class="container">
    <div class="left"></div>
    <div class="right">
       <el-card>
        <h2>{{ title }} --{{ count }}</h2>
           <div class="info">
             <el-form class="form" :model="ruleForm" :rules="rules" ref="formModel">
                <el-form-item prop="username">
                   <el-input placeholder="请输入用户名" v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                   <el-input show-password placeholder="请输入密码" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item prop="isArray">
                  <el-checkbox style="transform: scale(0.9);"  label="请勾选用户协议" v-model="ruleForm.isArray"/>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
                </el-form-item>
             </el-form>
           </div>
       </el-card>
    </div>
  </div>
</template>
<style lang="scss">
.container{
  display: flex;
  padding: 0;
}
 .left {
    border-radius: 0px 40px 40px 0px;
     overflow: hidden;
     flex: 60%;
     background-image: url('../../assets/common/login_back.png');
     background-repeat: no-repeat;
     height: 100vh;
 }
 .right{
   flex: 40%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .info{
  width: 350px;
  height: 350px;
  .form{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
 }
</style>
